<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,key) in hideItems" :key="key" >
				<view class=" uni-media-list ">
					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-flex uni-row">
							<view class="flex-item">
								{{item.text}}
							</view>
							<view class="flex-item-right">
								<switch :checked="item.checked" @change="switch1Change" :data-value-id="item.navigateValue" class="color-height"/>
							</view>
					</view>
					
				</view>
			</view>
		</view>

		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,key2) in exitItems" :key="key2" >
				<view class="uni-media-list ">

					<image class="uni-media-list-logo" :src="item.imgUrl"></image>
					<view class="uni-flex uni-row">
						<view class="flex-item">
							{{item.text}}
						</view>
						<view class="flex-item-right">
							<switch :checked="item.checked" @change="switch1Change" :data-value-id="item.navigateValue" class="color-height"/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,mapState,mapMutations
	} from 'vuex'
	import {updateUser} from '@/api/ucenter/index'
	export default {
		data() {
			return {
				keys: [
					"hasHiddenAge",
					"hasHiddenFans",
					"hasExitsBoard",
				],
				hideItems: [{
						text: '隐藏粮龄',
						imgUrl: '../../../static/image/my/setting/year.png',
						navigateValue: 0
					},
					{
						text: '隐藏粉丝',
						imgUrl: '../../../static/image/my/setting/privacypersonl.png',
						navigateValue: 1
					},
				],
				exitItems: [{
					text: '退出排行榜',
					imgUrl: '../../../static/image/my/setting/exit.png',
					navigateValue: 3
				}, ],

			};
		},
		computed: {
			...mapGetters(
				["hasLogin","userId"],
			),
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		onLoad(e) {
			this.hideItems[0].checked = (this.userInfo.hasHiddenAge =="Y" ? true : false)
			this.hideItems[1].checked = (this.userInfo.hasHiddenFans=="Y" ? true : false)
			this.exitItems[0].checked = (this.userInfo.hasExitsBoard=="Y" ? true : false)
		},
		methods: {
			 ...mapMutations(
				["UPDATE_USER_INFO",]
			),
			switch1Change(e) {
				var valueId = e.currentTarget.dataset.valueId;
				let user = this.userInfo;
				let key = this.keys[valueId]
				let val = e.detail.value == false ? "N" : "Y";
				user[key] = val;
				updateUser(user).then(response => {
					this.UPDATE_USER_INFO({key: key, value: val});
				})
				console.log('switch1 发生 change 事件，携带值为' + e.detail.value)
			}
		}
	}
</script>

<style>
	.uni-list {
		width: 710px !important;
		margin: 20px;
		border-radius: 15px;
	}
	
	.color-height {
		height: 50upx !important;
	}
	.uni-media-list-logo {
		width: 50px !important;
		height: 50px !important;
	}

	.uni-media-list-body {
		height: 36px;
		line-height: 36px;
		font-size: 28px !important;
		justify-content: space-around;
	}

	.uni-media-list-text-top {
		height: 40px !important;
		width: 100upx !important;
		overflow: hidden;
	}
	
	.flex-item {
		width: 430upx;
		text-align: left;
	}
	.flex-item-right {
		width: 150upx;
		text-align: right;
	}
</style>
